<template>
  <view class="container">
    <view class="feedback">
      <view class="feedback_top">问题和意见</view>
      <view class="feedback_bot">
        <uni-easyinput v-model="value" :inputBorder="false" maxlength="-1" type="textarea" placeholder="请输入问题描述"></uni-easyinput>
      </view>
      <view class="feedback_top">问题截图</view>
      <view class="feedback_bot">
        <uni-file-picker v-model="imageList" @select="select" @delete="deleteimage" :autoUpload="false" disable-preview mode="grid" file-mediatype="image" file-extname="png,jpg"></uni-file-picker>
      </view>
      <view class="feedback_top">联系电话</view>
      <view class="feedback_bot">
        <uni-easyinput v-model="phone" :inputBorder="false" type="number" placeholder="便于我们联系您"></uni-easyinput>
      </view>
      <view @click="submit" class="feedback_btn">
        <view>提交</view>
      </view>
    </view>
  </view>
</template>

<script>
  import baseURL from '../../utlis/baseURL.js'

  export default {
    data() {
      return {
        value: '',
        imageList: [],
        photoUrl: '',
        phone: '',
      }
    },
    methods: {
      // 选择图片
      async select(e, item) {
        const token = uni.getStorageSync("token")
        let urlist;
        e.tempFiles.forEach(v => {
          let data = {
            name: v.name,
            image: v.file,
            imagepath: v.url,
            uid: v.uuid,
          }
          uni.uploadFile({
            url: baseURL + '/file/upload',
            method: 'POST',
            file: data.image,
            filePath: data.imagepath,
            header: {
              "Authorization": token,
            },
            name: "file",
            success: (res) => {
              let nowres = JSON.parse(res.data)
              this.imageList.push({ image: nowres.data.url, blob: v.url })
              urlist = this.imageList.map(v => v.image).join(',')
              this.photoUrl = urlist
            },
            fail: (err) => {
              uni.showToast({
                title: "上传图片失败",
                icon: "none",
                duration: 2000
              });
            },
            complete: (res) => {
              uni.hideLoading()
            }
          });
        })
      },
      // 删除图片
      deleteimage(e) {
        var templist = []
				this.imageList.forEach(v => {
				  if(e.tempFile.blob != v.blob){
						templist.push(v)
						return;
				  }
				})
				this.imageList = templist
        let urlist = this.imageList.map(v => v.image).join(',')
        this.photoUrl = urlist
      },
      // 提交
      submit() {
        if(!this.value) {
          uni.showToast({
            title: '请填写问题描述！',
            icon: 'none',
            duration: 2000
          });
          return
        }
        let temp = {
          feedback: this.value,
          url: this.photoUrl,
          phone: this.phone,
        }
        this.$request.addreedback(temp).then(res => {
          if(res.code == 200) {
            uni.showToast({
              title: '提交成功',
              icon: 'success',
              duration: 2000
            });
            setTimeout(() => {
              uni.navigateBack({ delta: 1 })
            }, 2000);
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .feedback {
    .feedback_top {
      padding: 20rpx 25rpx;
      font-size: 30rpx;
    }

    .feedback_bot {
      background-color: #fff;

      .uni-easyinput {
        ::v-deep .uni-easyinput__content-textarea {
          padding: 0 25rpx;
          font-size: 30rpx;
        }
      }

      .uni-file-picker {
        padding: 15rpx 25rpx;
      }
    }

    .feedback_btn {
      padding: 50rpx 25rpx 0;

      view {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        color: #fff;
        font-size: 32rpx;
        border-radius: 40rpx;
        background-color: #00a0e9;
      }
    }
  }
</style>
